<script setup>
//  按需引入 echarts
import * as echarts from "echarts";

const dom = ref(); // 使用ref创建虚拟DOM引用，使用时用main.value

const { data } = defineProps({
	data: {
		type: Array,
	},
});

// 指定图表的配置项和数据
const option = reactive({
	xAxis: {
		type: "category",
		data: ["A", "B", "C", "D"],
	},
	yAxis: {
		type: "value",
		max: "dataMax",
		min: "dataMin",
	},
	series: [
		{
			data,
			type: "line",
			label: {
				show: true,
			},
		},
	],
});

onMounted(() => {
	var myChart = echarts.init(dom.value);
	myChart.setOption(option);
	window.addEventListener("resize", () => {
		myChart.resize();
	});
});
</script>

<template>
	<div ref="dom" style="width: 400px; height: 300px"></div>
</template>
